<template>
	<div class="changecourse">
		<div class="inpBox">
			<el-input class="inp" v-model="inpname" placeholder="请输入申请老师" @keyup.enter.native="seachAll"></el-input>
			<el-input class="inp" v-model="inptoname" placeholder="请输入指向老师" @keyup.enter.native="seachAll"></el-input>
			<el-input class="inp" v-model="inpcourse" placeholder="请输入申请课程" @keyup.enter.native="seachAll"></el-input>
			<el-input class="inp" v-model="inpapprover" placeholder="请输入审批人" @keyup.enter.native="seachAll"></el-input>
			<el-button class="btn changesearchbtn" size="mini" type="primary" icon="el-icon-search" @click.native="seachAll">搜索</el-button>
			<el-button class="btn btn1" size="mini" type="primary" icon="el-icon-circle-plus-outline"
				@click="addchangecourse">申请</el-button>
		</div>
		<el-table class="tab" :data="formdata">
			<el-table-column label="申请老师" prop="oldTeaName"></el-table-column>
			<el-table-column label="指向老师" prop="newTeaName"></el-table-column>
			<el-table-column label="申请课程" prop="oldSubName"></el-table-column>
			<el-table-column label="申请所换班级" prop="oldClazzName"></el-table-column>
			<el-table-column label="换课时间" prop="newTime"></el-table-column>
			<el-table-column prop="status" label="审批状态">
				<template slot="header" slot-scope="scope">
					<el-dropdown @command="siftuser" trigger="click">
						<span class="el-dropdown-link">
							审批状态<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command=3>全部</el-dropdown-item>
							<el-dropdown-item command=0>未审批</el-dropdown-item>
							<el-dropdown-item command=1>通过</el-dropdown-item>
							<el-dropdown-item command=2>未通过</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
				<template slot-scope="scope">
					<!--  <button @click="handleClick(scope.row.status)" >aaa</button> -->
					<span v-if="scope.row.status == 0">未审批</span>
					<span v-if="scope.row.status == 1" style="color: #6aad39;">审批通过</span>
					<span v-if="scope.row.status == 2" style="color: #fe0000;">审批未通过</span>
				</template>
			</el-table-column>
			<el-table-column label="审批人" prop="userName"></el-table-column>
			<el-table-column label="详情">
				<template slot-scope="scope">
					<span style="color: #106ab1;" @click="toDetails(scope.row)">详情</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<span style="color: red;" @click="delchangebox(scope.row)">删除</span>&nbsp;&nbsp;
				</template>
			</el-table-column>
		</el-table>
		<div class="pages">
			<el-pagination layout="prev, pager, next" :total="totalsize" class="page" @current-change="changepage"
				:current-page="pageindex" :page-size="pagesize">
			</el-pagination>
		</div>
		<!-- 删除模态框 -->
		<el-dialog title="" :visible.sync="deldialog" width="30%" class="deldialog">
			<span class="delcontent">确定删除该换课信息？</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="delchange">确 定</el-button>
				<el-button @click="deldialog = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			inpname: "",
			inptoname: "",
			inpcourse: "",
			inpapprover: "",
			name: "",
			toname: "",
			course: "",
			approver: "",
			totalsize: 0,//总条数
			deldialog: false,
			pageindex: 1,//当前显示页
			pagesize: 5,//页容量
			formdata: [],
			baseUrl: require("../js/baseUrl.js").baseUrl,
			chaId: "",
			status: "",//审批状态
		}
	},
	methods: {
		//详情
		toDetails(changesection) {
			//console.log(changesection);
			this.$router.push('/coursemanager/changecourse/changecoursesdetail?changecourseinfoid=' + changesection.chaId)
		},
		//申请
		addchangecourse() {
			this.$router.push('/coursemanager/changecourse/addchangecourses')
		},
		//获取换课列表
		getchangelist() {
			this.$http.post(this.baseUrl + "SchoolSys/cha/chalist", {
				pageindex: this.pageindex,
				pagesize: this.pagesize,
			}).then(res => {
				//console.log("换课列表",res);
				this.formdata = res.data.data.list
				this.totalsize = res.data.data.num * this.pagesize
			})
		},
		//删除模态框
		delchangebox(changeinfo) {
			//console.log(changeinfo);
			this.deldialog = true;
			this.chaId = changeinfo
		},
		//删除换课
		delchange() {
			this.$http.post(this.baseUrl + "SchoolSys/cha/delCha", {
				chaId: this.chaId.chaId,
			}).then(res => {
				//console.log(res);
				if (res.data.code == 200) {
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.pageindex = 1;
					this.deldialog = false;
					this.getchangelist();
				} else {
					this.$message({
						message: res.data.msg,
						type: 'error'
					});
				}
			})
		},
		//分页
		changepage(page) {
			this.pageindex = page;
			this.inpname = this.name
			this.inptoname = this.toname
			this.inpcourse = this.course
			this.inpapprover = this.approver

			if (this.status != "" || this.inpname != "" || this.inptoname != "" || this.inpcourse != "" || this.inpapprover != "") {
				this.searchchange()
			} else {
				this.getchangelist();
			}
		},
		//审批搜索
		siftuser(command) {
			this.status = command
			this.pageindex = 1
			this.searchchange();
		},
		seachAll() {
			this.pageindex = 1
			this.searchchange()
		},
		//搜索换课
		searchchange() {
			if (this.status == 3) {
				this.name = this.inpname
				this.toname = this.inptoname
				this.course = this.inpcourse
				this.approver = this.inpapprover
				this.$http.post(this.baseUrl + "SchoolSys/cha/search", {
					pageindex: this.pageindex,
					pagesize: this.pagesize,
					oldTeaName: this.name,
					newTeaName: this.toname,
					oldSubName: this.course,
					userName: this.approver,
				}).then(res => {
				/* 	console.log(res); */
					if (res.data.code == 200) {
						this.formdata = res.data.data.list
						this.totalsize = res.data.data.num * this.pagesize
					}
				})
			} else {
				this.name = this.inpname
				this.toname = this.inptoname
				this.course = this.inpcourse
				this.approver = this.inpapprover
				this.$http.post(this.baseUrl + "SchoolSys/cha/search", {
					pageindex: this.pageindex,
					pagesize: this.pagesize,
					oldTeaName: this.name,
					newTeaName: this.toname,
					oldSubName: this.course,
					userName: this.approver,
					status: this.status
				}).then(res => {
				 	//console.log("搜索列表",res); 
					if (res.data.code == 200) {
						this.formdata = res.data.data.list
						this.totalsize = res.data.data.num * this.pagesize
					}
				})
			}
		},
	},
	mounted() {
		this.getchangelist();
	}
}
</script>

<style lang="less">
.changecourse {
	padding: 40px;

	span {
		cursor: pointer;
	}

	.fail {
		color: green;
	}

	.nofail {
		color: red;
	}

	.pending {
		color: #aba9a9;
	}

	.inpBox {

		// display: flex;
		.el-input {
			width: 200px;
		}

		.el-input__inner {
			width: 200px;
			// height: 50px;
		}

		.inp {
			margin-right: 20px;
		}

		.btn {
			width: 88px;
			height: 40px;
			font-size: 14px;
		}
		.changesearchbtn{
			background: #106ab1;
		}
		.btn1 {
			float: right;
		}
	}

	.el-table .cell {
		text-align: center;
	}

	.el-table {
		background: transparent;
		margin: 0;
		width: 100% !important;
	}

	.el-table * {
		border: none !important;
	}

	.el-table::before {
		height: 0;
	}

	.el-table thead {
		color: #333;

		.el-table tr {
			background-color: transparent;
		}
	}

	.tab {
		margin-top: 40px;
		color: #333;

		// position: relative;
		.el-table__body {
			border-spacing: 0 8px;
		}
	}

	.pages {
		display: flex;
		justify-content: center;

		.page {
			text-align: center;
			margin-top: 30px;
		}
	}

	.deldialog {
		text-align: center;

		.delcontent {
			font-size: 20px;
			color: #333;
		}

		.el-dialog__footer {
			text-align: center;
		}
	}
}
</style>